<template>
  <div>
    <a class="index-title" href="" target="_blank" v-if="type==='h1'">
      {{text}}
    </a>
    <a class="index-title2" href="" target="_blank" v-if="type==='h2'">
      <div>      {{text}}</div>
    </a>
  </div>

</template>

<script>
export default {
  name:'index-title',
  props:{
    text:{
      type:String,
      default:'今日推荐'
    },
    type:{
      type:String,
      default:'h1'
    },
    // color:{
    //   type:String,
    //   default:"#333"
    // },
    // bgColor:{
    //   type:String,
    //   default:"#ffffff"
    // }
  }
}
</script>

<style lang="scss" scoped="scoped">

.index-title{
  display: block;
  font-size:20px;
  color: $title2_color;
  border-bottom: 2px solid $active_color;
  font-weight: bold;
  padding-left: 10px;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 20px;
  &::after{
    position: absolute;
    left: 0;
    top:2px;
    height: 26px;
    width: 5px;
    background-color: $sec_color;
    border-radius: 5px;
    content: '';
    display: block;
  }
}
.index-title2{
  display: block;
  font-size: 18px;
  color: $title2_color;
  position: relative;
  font-weight: bold;
  z-index: 2;
  width: fit-content;
  div{
    width: fit-content;
  }
  &::after{
    position: absolute;
    content: '';
    left: 0;
    bottom: 3px;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: $sec_color;
    z-index: -1;
  }
}
</style>
